﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../../src/test.css" rel="stylesheet" />
	<script src="../../../vendor/js/jquery.js"></script>
	<script src="../../../dist/js/ud2.js"></script>
	<style>
		td {
			width: 1%;
		}
	</style>
</head>
<body>

	<h3>数据集合控件</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<p style="margin-top: 10px;">
				<button class="btn btn-solid c-green">添加一行数据</button>
				<button class="btn btn-solid c-red">删除第一行数据</button>
				<button class="btn btn-solid c-green">添加一列数据</button>
				<button class="btn btn-solid c-red">删除第一列数据</button>
				<button class="btn btn-solid c-blue">将下方table插入到datatable</button>
			</p>

			<table style="margin-top: 10px;" class="table" data-table>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
				</tr>
				<tr>
					<td rowspan="3">a</td>
					<td>2</td>
					<td colspan="3">b</td>
				</tr>
				<tr>
					<td>2</td>
					<td ud2-data-type="number">3</td>
					<td rowspan="3">d</td>
					<td>5</td>
				</tr>
				<tr>
					<td>2</td>
					<td>3</td>
					<td>5</td>
				</tr>
				<tr>
					<td colspan="3">c</td>
					<td>5</td>
				</tr>
			</table>

			<script>
				ud2.ready(function () {

					var dt = ud2.datatable({
						id: 'abc',
						columns: [
							
						],
						rows: [
							[Date()],
							['', 'string'],
							[-1, 0, 1,],
							[true, false],
							[{}, [], function () { }]
						]
					});

					function html() {
						$('table.temp').remove();
						var jTable = $('<table class="table temp"><tbody /></table>');
						var html = [];
						for (var ri = 0, rl = dt.rows.length; ri < rl; ri++) {
							html.push('<tr>');
							for (var ci = 0, cl = dt.rows[ri].cells.length, cls; ci < cl; ci++) {
								if (dt.rows[ri].cells[ci].val() === null) cls = 'warning';
								else cls = 'info';
								html.push('<td class="' + cls + '">' + dt.rows[ri].cells[ci].val() + '<br><small>类型：' + dt.rows[ri].cells[ci].dataType() + '</small></td>');
							}
							html.push('</tr>');
						}

						jTable.children().append(html.join(''));
						jTable.prependTo('div');
					}
					html();
					window.dt = dt;
					window.html = html;

					var btns = $('.btn');
					ud2.event(btns.eq(0)).setTap(function () {
						dt.rowAdd([1, 2, 3, 4, 5]);
						html();
					});
					ud2.event(btns.eq(1)).setTap(function () {
						dt.rowRemove(dt.rows[0]);
						html();
					});
					ud2.event(btns.eq(2)).setTap(function () {
						dt.columnAdd();
						html();
					});
					ud2.event(btns.eq(3)).setTap(function () {
						dt.columnRemove(dt.columns[0]);
						html();
					});
					ud2.event(btns.eq(4)).setTap(function () {
						dt.dataFill($('[data-table]'));
						html();
					});
				});
			</script>

		</div>
	</fieldset>

</body>
</html>
